import { NButton, NTag } from 'naive-ui'
import { Directive, h, resolveDirective, withDirectives } from 'vue';
import { statusMapText, statusMapTag } from "../../../utils/enum";
import type { DirectiveArguments } from "vue";

interface Columns {
    updateFn: Function,
    deleteFn: Function
}

export interface FormType {
    id?: number | null,
    label: string,// 名称
    describe: string,
    menuIds: [],
    status: 1101 | 1102  // 1101启用 1102禁用
}


export const tableColumns = ({ updateFn, deleteFn }: Columns) => {
    return [
        {
            title: '创建时间',
            key: 'createdAt',
            width: '200',
            align: 'center'
        },
        {
            title: '角色名称',
            key: 'label',
            width: '250',
            align: 'center'
        },
        {
            title: '角色描述',
            key: 'describe',
            align: 'center'
        },
        {
            title: '角色状态',
            key: 'status',
            width: '150',
            align: 'center',
            render(row: any) {
                return h(
                    NTag,
                    {
                        type: statusMapTag(row.status)
                    },
                    { default: () => statusMapText(row.status) }
                )
            }
        },
        {
            title: '操作',
            align: 'center',
            width: '200',
            key: 'actions',
            render(row: any) {
                const auth: Directive | undefined = resolveDirective('auth');
                return [
                    withDirectives(h(
                            NButton,
                            { type: 'warning', ghost: true, onClick: () => updateFn(row) },
                            { default: () => '编辑' }),
                        <DirectiveArguments> []),
                    withDirectives(h(
                        NButton,
                        { style: { 'margin-left': '10px' }, type: 'error', ghost: true, onClick: () => deleteFn(row) },
                        { default: () => '删除' }),
                        <DirectiveArguments> [[auth, 'system-role-delete']])
                ]
            }
        }
    ]
}

export const baseForm = (): FormType => ({
    id: null,
    label: '',// 名称
    describe: '',
    menuIds: [],
    status: 1101
})

// 表单校验
export const formRules = {
    label: {
        required: true,
        message: '请输入角色名称'
    },
    describe: {
        required: true,
        message: '请输入角色描述'
    },
    menuIds: {
        required: true,
        message: '请选择菜单权限'
    },
    status: {
        required: true,
        message: '请选择角色状态'
    }
}


